@media all {
    html, body {
        height: 100%;
        max-height: 100%;
        /*
        margin: 0;
        padding: 0;
        */
    }

    body {
        box-sizing: border-box;
        /*
        padding: .5em;
        */
    }

    #body {
        text-align: center;
    }

    a:link, a:link:visited { text-decoration: none; }
    a:link:hover { text-decoration: underline; }

    blockquote {
        margin-top: 3em;
        display: block;
        clear: both;
    }

    /* for old / text browsers */
    .legacy {
        display: none;
    }

    .hidden {
        display: none ! important;
    }

    a.button {
        display: inline-block;
        padding: .7em;
        background-color: #CCC;
        border: 2px solid #999;
        border-radius: .7em;
        margin: .3em;
    }

    a.button:hover {
        background-color: #AAA;
        text-decoration: none;
    }

    h3 {
        clear: left;
        margin-bottom: 0;
    }

    hr {
        clear: both;
    }

    body.popup, body.popup2 {
        overflow: hidden;
    }

    #popup_wrap, #popup2_wrap {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        text-align: center;
        padding: 2em;
        margin: 0;
        background: url('/usr/include/ui/overlay.png') repeat;
    }

    #popup_wrap {
        z-index: 10;
    }

    #popup2_wrap {
        z-index: 20;
    }

    .popup #popup_wrap, .popup2 #popup2_wrap {
        display: block;
    }

    #popup_header, #popup2_header {
        display: block;
        position: fixed;
    }

    #popup, #popup2 {
        display: inline-block;
        text-align: left;
        box-sizing: border-box;
        max-height: 100%;
        max-width: 100%;
        padding: 0 2em 0 2em;
        overflow: auto;
        border-radius: 1em;
        /* required to override default fieldset min-width which is "fit content" */
        min-width: 1em;
    }

    #popup h1, #popup2 h1 {
        display: block;
    }

    #popup {
        background-color: #E8E6C4;
        border: 1em solid #E8E6C4;
        border-right: none;
        border-left: none;
    }

    #popup2 {
        background-color: #C4E6E8;
        border: 1em solid #C4E6E8;
        border-right: none;
        border-left: none;
    }

    #popup_close, #popup2_close {
        cursor: pointer;
        float: left;
        margin: -0.5em 2em 2em -1.5em;
    }

    #popup:after, #popup2:after {
        content: url(/usr/include/ui/loading.gif);
        clear: both;
        margin: 4em;
        display: block;
    }

    #popup.ready:after, #popup2.ready:after {
        display: none;
    }

    #meta, #meta2, #meta3 {
        float: left;
        display: block;
        padding: .5em;
        list-style-type: none;
        margin: 0;
        /*
        margin: .5em;
        */
    }

    #meta {
        background-color: #CFF;
    }

    #meta2 {
        background-color: #FCF;
    }

    #meta3 {
        background-color: #FFC;
    }

    #meta li, #meta2 li, #meta3 li {
        display: inline-block;
        padding-left: .3em;
        padding-right: .3em;
    }

    #async {
        /*
        float: right;
        clear: right;
        */
        display: block;
        width: 100%;
        max-width: 100%;
        height: 75px;
        overflow: auto;
    }

    .data, .actions {
        /*
        float: left;
        */
        border: 2px solid #888;
        margin: 1em;
        display: block;
    }

    .data {
        float: middle;
        clear: left;
        padding: 0;
    }

    .data .content {
        max-height: 17em;
        overflow: auto;
    }

    .actions {
        text-align: center;
        background-color: #EEE;
    }

    .data .data {
        float: none;
        border: 2px solid #BBB;
        margin: .2em;
        margin-top: 0;
        margin-left: 2em;
        padding-right: .2em;
    }

    .data>legend, .actions>legend {
        padding: 0;
        padding-left: .2em;
        padding-right: .2em;
        margin-top: 0;
        margin-left: 1em;
        margin-right: 1em;
        font-weight: bold;
        font-size: larger;
    }

    .data>legend>h3 {
        margin: 0;
    }

    .data .data>legend {
        font-size: small;
    }

    .data input.search {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        background-image: url('/usr/include/ui/search.png');
        background-repeat: no-repeat;
        padding-left: 20px;
        min-height: 17px;
    }

    .data input.search.loading {
        background-image: url('/usr/include/ui/loading_small.gif');
    }

    .data>div>ul, #data {
        list-style: none;
        display: block;
        margin:0;
        padding:0;
    }

    .data>div>ul>li, #data>li {
        list-style: none;
        display: block;
        margin:0;
        padding:0;
        border-bottom: 1px solid #CCC;
    }

    .data>div>ul>li>a, #data>li>a {
        padding: .2em;
        font-weight: bold;
        display: block;
    }

    .actions>ul, .actions>ul>li {
        list-style: none;
        display: inline;
        padding: 0;
    }

    .data a.create {
        display: block;
        text-align: right;
        font-size: x-small;
        background-color: #EEE;
        padding: .3em;
    }

    .data li.create a, #data li.create a {
        display: block;
        text-align: center;
        font-style: italic;
        background-color: #EEE;
    }

    .data>div>ul>li>a:hover, #data>li>a:hover, .data a.create:hover {
        background-color: #FFC;
        text-decoration: none;
    }
}

